<template>
  <el-tooltip v-bind="$attrs" :show-after="showAfter" :hide-after="hideAfter" :placement="placement">
    <template #content>
      <div class="smart-tooltip-content">
        <slot name="content" />
      </div>
    </template>
    <slot />
  </el-tooltip>
</template>

<script setup lang="ts">
import { ElTooltip } from 'element-plus'
import { defineProps } from 'vue'

defineProps({
  showAfter: { type: Number, default: 500 },
  hideAfter: { type: Number, default: 1000 },
  placement: { type: String, default: 'top' }
})
</script>

<style scoped>
.smart-tooltip-content {
  max-width: 220px;
  word-break: break-all;
  white-space: pre-line;
  font-size: 12px;
  line-height: 1.5;
}
</style> 